<template>
  <div>
    <u-cell-group :border="false">
      <required-parameter />

      <block>
        <cus-cell
          title="选择时间类型"
          :border="false"
          v-if="
            editConfigCom.attribute &&
            editConfigCom.attribute.hasOwnProperty('mode')
          "
        >
        </cus-cell>
        <div
          class="cell__body"
          v-if="
            editConfigCom.attribute &&
            editConfigCom.attribute.hasOwnProperty('mode')
          "
        >
          <u-radio-group
            v-model="editConfigCom.attribute.mode"
            placement="column"
            :activeColor="$theme.themeColor.primary"
          >
            <u-radio
              :customStyle="{ marginBottom: '8px' }"
              v-for="(item, index) in modeOptions"
              :key="index"
              :label="item.label"
              :name="item.name"
            >
            </u-radio>
          </u-radio-group>
        </div>
      </block>
    </u-cell-group>
    <!--    {{ editConfigCom.attribute }}-->
  </div>
</template>

<script>
import requiredParameter from "@/components/cusFormConfig/requiredParameter";
export default {
  components: { requiredParameter },
  computed: {
    pageData() {
      return this.$store.state.page.page;
    },
    editConfigComActiveId() {
      return this.$store.state.page.editConfigComActiveId;
    },
    activeIndex({ pageData, editConfigComActiveId }) {
      return pageData.items.findIndex((v) => v.id === editConfigComActiveId);
    },
    //组件本身属性
    editConfigCom({ pageData, activeIndex }) {
      return pageData.items[activeIndex];
    },
  },
  data() {
    return {
      modeOptions: [
        {
          label: "年/月/日/时/分",
          name: "datetime",
        },
        {
          label: "年/月/日",
          name: "date",
        },
        {
          label: "年/月",
          name: "year-month",
        },
        {
          label: "时/分",
          name: "time",
        },
      ],
    };
  },
  created() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.u-slot-checkbox-list {
  background-color: white;
  width: 100%;
  margin: 10px auto;
  border-radius: 16px;
}
.u-slot-color {
  display: flex;
  align-items: center;
  .color-box {
    margin-left: 10px;
    width: 100px;
    height: 35px;
    border: 1px solid lightgray;
  }
}
.color-picker {
  position: absolute;
  &-container {
    position: absolute;
    top: 20px;
    //left: -25px;
    z-index: 9999;
  }
}
.cell__body {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding: 10px 15px;
  font-size: 15px;
  color: #303133;
  align-items: center;
  background-color: #F9F9F9;
  border-radius: 8px;
}
</style>
